<template>
  <div class="app-container">
      <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>权限列表</span>
      <el-button class="btn-add" @click="handleAddProduct()" size="medium" type="primary">
        添加新权限
      </el-button>
    </el-card>
    <el-table ref="productTable"
                :data="list"
               style="width: 100%;margin-bottom: 20px;"
                v-loading="listLoading"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                >
        <el-table-column label="名称" width="320" align="center">
          <template slot-scope="scope">
              {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="图标" width="150" align="center">
          <template slot-scope="scope">{{scope.row.icon}}</template>
        </el-table-column>
        <el-table-column label="排序" width="150" align="center">
          <template slot-scope="scope">{{scope.row.sort}}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="250" align="center">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditPermission(scope.$index, scope.row)">编辑
              </el-button>
              <!-- <el-button
                size="mini"
                @click="handleUpdatePermission(scope.$index, scope.row)">分配权限
              </el-button> -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDeletePermission(scope.$index, scope.row)">删除
              </el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 新增权限的弹窗 -->
    <el-dialog title="新增权限" :visible.sync="isNewPermissionOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="newForm" style="width:25rem;" :rules="newFormRules" >
            <el-form-item label="菜单" prop="menu" required label-width="5rem">
                <el-radio v-model="newForm.menu" label="1">一级菜单</el-radio>
                <el-radio v-model="newForm.menu" label="2">二级菜单</el-radio>
            </el-form-item>
            <el-form-item label="父菜单" prop="pid" required label-width="5rem" v-if="newForm.menu ==2">
                <!-- <el-radio v-model="newForm.pid" label="1">商品管理</el-radio>
                <el-radio v-model="newForm.pid" label="19">系统管理</el-radio> -->
                <el-radio v-for=" item in list" :key="item.id"  v-model="newForm.pid" :label="item.id">{{item.name}}</el-radio>
            </el-form-item>
            <el-form-item label="权限名" prop="name" required label-width="5rem">
                <el-input v-model="newForm.name" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
              <el-form-item label="链接" prop="uri" required label-width="5rem">
                <el-input v-model="newForm.uri" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="排序"  prop="sort" label-width="5rem">
                <el-input v-model="newForm.sort" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="图标"   prop="icon" label-width="5rem">
                <el-input v-model="newForm.icon" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNewPermission('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isNewPermissionOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 编辑权限的弹窗 -->
    <el-dialog title="编辑权限" :visible.sync="isEditPermissionOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="editForm" style="width:25rem;" :rules="editFormRules" >
            <el-form-item label="名称" prop="name" required label-width="5rem">
                <el-input v-model="editForm.name" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="链接" prop="uri" required label-width="5rem">
                <el-input v-model="editForm.uri" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="排序" required prop="sort" label-width="5rem">
                <el-input v-model="editForm.sort" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="图标"  required prop="icon" label-width="5rem">
                <el-input v-model="editForm.icon" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="savePermissionInfo('editForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isEditPermissionOpen = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
    import {
    fetchPermissionList,
    updatePermissionInfo,
    newPermission,
    deletePermission,
    // updateDeleteStatus,
    // updateNewStatus,
    // updateRecommendStatus,
    // updatePublishStatus
  } from '@/api/permission'
//   import {fetchList as fetchSkuStockList,update as updateSkuStockList} from '@/api/skuStock'
//   import {fetchList as fetchProductAttrList} from '@/api/productAttr'
//   import {fetchList as fetchBrandList} from '@/api/brand'
//   import {fetchListWithChildren} from '@/api/productCate'

  const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
    publishStatus: null,
    verifyStatus: null,
    productSn: null,
    productCategoryId: null,
    brandId: null
  };
  export default {
    name: "permissionList",
    data() {
      return {
          list:[],
          defaultProps: {
            children: 'children',
            label: 'label'
            },
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增权限弹框里内容
            name:'',
            menu:'1',
            pid:0,
            name:"",
            uri:"",
            sort:0,
            icon:"",//按说icon是要上传图片的
          },
          editForm: {//编辑权限弹框里内容
            currentUId:0,
            name:'',
            sort:'',
            icon:'',
            uri:'',
            pid:'',
          },
          newFormRules:{
            name:[
                { required: true,  message: '权限名不能为空', trigger: ['blur','change']}
             ],
              uri:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
             sort:[
                { required: true,  message: '排序不能为空', trigger: ['blur','change']}
             ],
             icon:[
                { required: true,  message: '图标不能为空', trigger: ['blur','change']}
             ],
          },
          editFormRules:{
            name:[
                { required: true,  message: '权限名不能为空', trigger: ['blur','change']}
             ],
             uri:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
             sort:[
                { required: true,  message: '排序不能为空', trigger: ['blur','change']}
             ],
             icon:[
                { required: true,  message: '图标不能为空', trigger: ['blur','change']}
             ],
          },

          isNewPermissionOpen:false,//新增权限弹窗
          isEditPermissionOpen:false,//编辑权限弹窗
         
      }
    },
    created() {
      this.getList();
    },
    methods:{
      getList() {
        this.listLoading = true;
        fetchPermissionList().then(response => {
            if(response.code === 200){
               this.listLoading = false;
                
                //this.total = response.data.total;
                let res = response.data;
                let permissonArr=[];
                let permissonArrTemp =[];
                res.forEach((item,index)=>{
                    if(item.pid === 0){
                        let newLabelObj={
                            id: item.id,
                            name:item.name,
                            icon:item.icon,
                            status:item.status,
                            sort:item.sort,
                            createTime:item.createTime,
                            uri:item.uri,
                            pid:item.pid,
                            children:[],
                        }
                        permissonArr.push(newLabelObj);
                    }else{
                        permissonArr.forEach((item1,index1)=>{
                            if(item1.id === item.pid){
                                item1.children.push({
                                    id: item.id,
                                    name:item.name,
                                    icon:item.icon,
                                    status:item.status,
                                    sort:item.sort,
                                    createTime:item.createTime,
                                    uri:item.uri,
                                    pid:item.pid,
                                })
                            }
                        })
                    }
                })
                this.list = permissonArr;
            }
           
        });
      },
      handleEditPermission(index,item){
        this.isEditPermissionOpen = true;
        this.editForm = JSON.parse(JSON.stringify(item));
         this.editForm.currentUId = item.id;
        // this.editForm.name = item.name;
        console.log(this.editForm);
      },
      handleAddProduct(){
          this.isNewPermissionOpen = true;
      },
      saveNewPermission(){
          let self= this;
          if(self.newForm.menu ==1){
            self.newForm.pid =0;
          }
          self.newForm.description = self.newForm.name;
          //console.log(self.newForm);
        newPermission(self.newForm).then(response=>{
            if(response.code == 200){
                self.$message({
                message: '新建成功',
                type: 'success',
                duration: 1000
            });
            self.isNewPermissionOpen=false;
            self.getList();
            }
        })
      },
      savePermissionInfo(){
          console.log(this.editForm);
        updatePermissionInfo(this.editForm.currentUId,this.editForm).then(response=>{
            this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
            });
            this.isEditPermissionOpen=false;
            this.getList();
        });
      },
      handleDeletePermission(index,item){
          let self = this;
           self.$confirm('删除该权限, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let arrTemp= [];
                arrTemp.push(item.id);
                //objTemp.ids = arrTemp;
                let params = new URLSearchParams();
                params.append('ids', arrTemp);
                deletePermission(params).then(response=>{
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    margin-top: -8px;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 
</style>